<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <link rel="stylesheet" type="text/css" href="__public__static/imgareaselect/css/imgareaselect-default.css" />
    <script type="text/javascript" src="__public__static/imgareaselect/scripts/jquery.min.js"></script>
    <script type="text/javascript" src="__public__static/imgareaselect/scripts/jquery.imgareaselect.pack.js"></script>
    <script type="text/javascript">
        function preview(img, selection) {
            $('#selectbanner').data('x',selection.x1);
            $('#selectbanner').data('y',selection.y1);
            $('#selectbanner').data('w',selection.width);
            $('#selectbanner').data('h',selection.height);

            var scaleX = 100 / (selection.width || 1);
            var scaleY = 100 / (selection.height || 1);
            $('#ferret  > img').css({
                width: Math.round(scaleX * 512) + 'px',//512、390是你上传图片的宽高
                height: Math.round(scaleY * 390) + 'px',
                marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
                marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
            });
        }

        //这里通过jQuery语法在原来图片后插入预览的小图片
        $(document).ready(function () {
            $('<div id="ferret"><img src="" style="position: relative;" /><div>').css({
                        float: 'left',
                        position: 'relative',
                        overflow: 'hidden',
                        width: '100px',
                        height: '100px'
                    })

                    .insertAfter($('#selectbanner'));

            $('#selectbanner').imgAreaSelect({
                selectionColor: 'blue', x1:0, y1:0, x2: 100,//初始位置
                maxWidth:500,y2:100,
                aspectRatio: '1:1',//缩放比例
                selectionOpacity: 0.2 ,
                onSelectEnd: preview //裁剪后执行的函数，在上面
            });
            //确认裁剪
            $("#sliceButton").click(function() {
                var pic = $('#selectbanner').attr('src');
                // alert(pic);
                var x,y,w,h;
                $.post(
                        "{:url('cut_pic/crop/slicebanner')}", //（2）将附上这个页面的代码
                        {
                            x:$('#selectbanner').data('x'),
                            y:$('#selectbanner').data('y'),
                            w:$('#selectbanner').data('w'),
                            h:$('#selectbanner').data('h'),
                            pic:pic
                        },
                        function(data){
                            //  alert(data);
                            //把裁剪后图片加载到#sure
                            if(data){
                                $('#sure').attr('src',data);
                            }
                        }
                );
            });

            $('#cut').click(function(){
                $('#img').addClass('jcrop-holder');
            });
        })

    function show_pic(){
        var temp = document.getElementById('img').files[0];
        var src = window.URL.createObjectURL(temp);
        document.getElementById('show_img').src = src;
    }
    </script>
    <title>图片裁剪、预览</title>
</head>
<body>

<div id="s">
    <!--上传图片-->
    <form action="{:url('cut_pic/crop/img_upload')}" method="post" enctype="multipart/form-data">
        <input type="file" id="img" name="img" value="" onchange="show_pic()" />
        <input name="submit" id="submit" type="submit" value="提交" class="submit"/>
    </form>
    <!--显示图片-->
    <div>
        <img id="show_img" src="" width="400px" />
    </div>
</div>
<!--确认裁剪-->
<input type="button" id="cut" value="选择裁剪">
<div><input type="submit" id="sliceButton" name="sliceButton" value="sliceButton"></div>
<!--显示裁剪后的图片-->
<    div><img  id="sure" src="" style="cursor:hand" /></div>
</body>
</html>

<style>
    .jcrop-holder{
        display: block;
        position: absolute;
        z-index: 2000;
        top: 10px;
        right: -240px;
        padding: 6px;
        border: 1px rgba(0, 0, 0, .4) solid;
        background-color: white;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
    }
</style>